<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    #div1 input {
        background: white;
    }
    
    #div1 input.active {
        background: yellow;
    }
    
    #div1 div {
        width: 200px;
        height: 200px;
        background: #CCC;
        display: none;
    }
    </style>
    <script>
    window.onload = function() {
        new TabSwitch('div1');
    };

    function TabSwitch(id) {
        var _this = this;
        var oDiv = document.getElementById(id);

        this.aBtn = oDiv.getElementsByTagName('input');
        this.aDiv = oDiv.getElementsByTagName('div');

        for (var i = 0; i < this.aBtn.length; i++) {
            this.aBtn[i].index = i;
            this.aBtn[i].onclick = function() {
                _this.fnClick();
            };
        }
    };

    TabSwitch.prototype.fnClick = function() {
        //alert(this);
        for (var i = 0; i < this.aBtn.length; i++) {
            this.aBtn[i].className = ''
            this.aDiv[i].style.display = 'none';
        }
        oBtn.className = 'active';
        this.aDiv[oBtn.index].style.display = 'block';
    }
    </script>
</head>

<body>
    <div id="div1">
        <input class="active" type="button" value="aaa" />
        <input type="button" value="bbb" />
        <input type="button" value="ccc" />
        <div style="display:block;">aaa</div>
        <div>dfsadf</div>
        <div>erwqerwe</div>
    </div>
</body>

</html>
